<template>
  <div>
    <div class="div1">
      <i @click="goToGg" class="el-icon-back"></i>
      <span class="s2">全部评价</span>
    </div>
    <div class="button-group">
      <button class="but1">汽车很新</button>
      <button class="but2">服务很好</button>
      <button class="but3">还车方便</button>
    </div>
    <br>
    <br>
    <br>
    <div v-for="(review, index) in reviews" :key="index" class="div2">
      <van-image class="img2" round width="3rem" height="3rem" :src="review.userImageUrl" />
      <span class="span2">{{ review.userName }}</span>
      <span class="span3">{{ review.reviewDate | format("yyyy-MM-dd")}}</span><br />
      <van-rate class="xing1" v-model="review.rating" readonly/><br />
      <p>{{ review.reviewText }}</p>
      <img v-if="review.reviewImageUrl" class="img1" :src="review.reviewImageUrl" />
    </div>

    <van-loading style="margin-top: 20px" size="24px">加载中...</van-loading>
<!--    <div class="recommended-section">-->
<!--      <div class="car-list">-->
<!--        <div v-for="(car, index) in cars" :key="index" class="car-item">-->
<!--          &lt;!&ndash;          <img :src="car.image" :alt="car.name" class="car-image">&ndash;&gt;-->
<!--          <div class="car-info">-->
<!--            &lt;!&ndash;            <span class="car-name">{{ car.name }}</span>&ndash;&gt;-->
<!--            &lt;!&ndash;            <span class="car-price">{{ car.price }}</span>&ndash;&gt;-->
<!--          </div>-->
<!--          <van-icon name="heart-o" class="favorite-icon" />-->
<!--        </div>-->
<!--      </div>-->
<!--    </div>-->
  </div>
</template>

<script>
export default {
  data() {
    return {
      user:'',
      cars:'',
      value: 5,
      list3: [
        {
          name: '吴化平',
          title: '副主任医师',
          skill: '冠心病外科治疗、心脏不停跳下',
          status: ''
        }
      ],
      reviews: [
        {
          userImageUrl: '',
          user: '',
          reviewDate: '',
          rating: 0,
          reviewText: '',
          reviewImageUrl: '',
        },
      ]
    };
  },
  created() {
    this.user = JSON.parse(localStorage.getItem("currentUser"))
    if (this.user == null) {
      this.$message.error("请先登录")
      setTimeout(
          () => {
            this.$router.push({ name: 'login' });
          },
          1000
      )
    }
    this.cars = JSON.parse(localStorage.getItem("cars"))
    this.findReviewsAll()
  },
  methods: {
    findReviewsAll(){
      var carId = this.cars.carId
      console.log(this.cars)
      console.log("carID"+carId)
      this.axios.get(`http://localhost:10086/api/user/reviews/findReviewsAll/${carId}`).then(res=>{
        if (res.data.code == 200){
          console.log(res.data.data)
          this.reviews = res.data.data
          for (const review of this.reviews) {
            review.userName = review.userName.substring(0,1)+'**'
          }
        }else{
          this.reviews=null
        }
      })
    },
    goToGg() {
      this.$router.go(-1)
    }
  },
  filters:{
    format(value,arg){
      function dateFormat(date, format) {
        if (typeof date === "string") {
          var mts = date.match(/(\/Date\((\d+)\)\/)/);
          if (mts && mts.length >= 3) {
            date = parseInt(mts[2]);
          }
        }
        date = new Date(date);
        if (!date || date.toUTCString() == "Invalid Date") {
          return "";
        }
        var map = {
          "M": date.getMonth() + 1, //月份
          "d": date.getDate(), //日
          "h": date.getHours(), //小时
          "m": date.getMinutes(), //分
          "s": date.getSeconds(), //秒
          "q": Math.floor((date.getMonth() + 3) / 3), //季度
          "S": date.getMilliseconds() //毫秒
        };
        format = format.replace(/([yMdhmsqS])+/g, function (all, t) {
          var v = map[t];
          if (v !== undefined) {
            if (all.length > 1) {
              v = '0' + v;
              v = v.substr(v.length - 2);
            }
            return v;
          } else if (t === 'y') {
            return (date.getFullYear() + '').substr(4 - all.length);
          }
          return all;
        });
        return format;
      }

      return dateFormat(value,arg);

    }
  },
};
</script>

<style>
@import "./review.css";
.button-group {
  float: left;
  margin-left: 30px;
  margin-bottom: 20px;
  margin-top: 20px;
}
</style>